{extend name="common/pop" /}
{block name="style"}
<style>
    .layui-layer-shade{
        background-color:#000000 !important;
        opacity:0.6!important;
    }

</style>
{/block}
{block name="content"}
<div class="layui-form" style="margin-top:15px;width:90%;">
    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block ">
            <input id="tree" type="text" placeholder="请选择" value="" readonly="readonly" class="layui-input">
            <input type="hidden" name="pid" value="0">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属插件</label>
        <div class="layui-input-block ">
            <select name="flag" id="">
                {volist name="flag" id="f"}
                    <option value="{$key}">{$f}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name" value="" required placeholder="请输入菜单名称" autocomplete="off"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-sm layui-btn-primary icon-library">图标库</button>
            <input type="hidden" name="icon" value="" readonly class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><i class="layui-icon" id="show-icon"></i></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">控制器</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="controller" value="" required placeholder="请输入控制器名称" autocomplete="off"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">方法</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="action" value="" required placeholder="请输入方法名称" autocomplete="off"/>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="is_show" lay-skin="switch" lay-text="显示|隐藏" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
            {volist name="menu_type" id="mt"}
            <input type="radio" name="type" value="{$mt.flag}" title="{$mt.name}" {if $mt.checked}checked{/if}>
            {/volist}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="number" step="1" class="layui-input" name="sort" value="0" required  autocomplete="off"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="create">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__COMMON__/js/popups.js" type="application/javascript"></script>
<script src="/static/common/js/common.js" type="application/javascript"></script>
<script>
    var $;
    layui.config({
        base: '/static/extra/layui/plugins/treeselect/module/'
    }).extend({
        treeSelect: 'treeSelect/treeSelect'
    }).use(['treeSelect', 'form', 'layer'], function () {
        var treeSelect = layui.treeSelect,
            form = layui.form,
            layer = layui.layer;
        $ = layui.jquery;
        treeSelect.render({
            elem: '#tree',
            data: '{:url("menu/getSelectTree")}',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择菜单',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: false
                },
                line: { // 连接线
                    enable: true // 是否开启：true/false
                }
            },
            // 点击回调
            click: function(d){
                console.log(d);
                $('input[name=pid]').val(d.current.id);
            },
            // 加载完成后的回调函数
            success: function (d) {
                treeSelect.refresh('tree');
            }
        });

        //图标库页面弹出

        form.on('submit(create)',function(data){
            var loading = layer.load();
            $.post('{:url("Menu/create")}',data.field,function(r){
                layer.close(loading);
                if(r.code == 1){
                    layer.msg('已提交');
                    close(1000,true);
                }else{
                    layer.msg(r.msg);
                }
            },'json')
        });

    })
    function handleIcon(icon,_class){
        $('input[name=icon]').val(icon);
        $('#show-icon').removeAttr('class').addClass('layui-icon '+_class);
    }
</script>
{/block}

